 <%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${initParam.url }/statics/css/login.css" rel="stylesheet">
<style type="text/css">
		#table1{
			
			margin-top:20px;
			margin-left:100px;;
			font-size:15px;
			
		}
		#table1 tr td:nth-child(3){
			
			color: red;
		}
	  tr{
			margin-top: 10px;
		
		}
		
		#but input{
		margin-left:200px;
		margin-top: 20px;
		
		}
		.status{
			width: 170px;
			height:28px;
			margin-top: 10px;
		}
		.phone input{
		
			margin-top:10px;
			
		 }
		 #search{
		 	margin-left:300px;
		 }
		 .page{
	 
	width:350px; 
	text-align: center;
	margin: auto;
	font-size: 15px;
	 }
	.page a{
	 	margin: 5px;
	 	background-color:#9bcdff;
	 	color:white;
	 	padding: 5px;
	 	font-weight: bold;
	 }
	
	#xinxi tr:nth-child(2n){
	 	background-color: #eeffff;
	 }
	 #xinxi{
	 	width: 95%;
	 	margin-left: 20px;
	 	font-size: 15px;
	 
	 }
	 #de{
	 	width:200px;
	 	
	 	margin: auto;
	 	font-size:16px;
	 	margin-top:40px;
	 }
	</style>
<script type="text/javascript">
	$(function(){
		$("#name").blur(checkname);
		$("#phone").blur(checkphone);
		$("#btn").click(function(){
				var flag=true;
				if(!checkname()){
					flag=false;
				}
				if(!checkphone()){
				
					flag=false;
				}
				if(flag==true){
					$("#sub").submit();
				}
		})
	});
	function checkname(){
		$("#DIVName").html("");
		if($("#name").val()==""){
			$("#DIVName").html("业主姓名不能为空");
			return false;
		}
		return true;
	}
	function checkphone(){
		$("#DIVPhone").html("");
		var reg=/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
		if($("#phone").val()==""){
			
			$("#DIVPhone").html("联系电话不能为空");
			return false;
		}
		if(!reg.test($("#phone").val())){
			
			$("#DIVPhone").html("格式不正确");
			return false;
		}
		return true;
	}
	
	
	function pop() {
		$('#my1').modal();
	};
	
	function as(id) {
		$("#table1").empty();
		$("#se").empty();
		$.ajax({
			type:"post",
			url:"/property/main/getOwner",
			data:{id:id},
			dataType:"json",
			success:function(data){
				$('#table1').append("<tr><td><input type='hidden' value='"+data.id+"' name='id'/ ></td></tr");
				$('#table1').append("<tr><td>业主真实姓名：</td><td><input type='text' value='"+data.name+"' name='name' onblur='checkname()' id='name'/ ></td><td id='DIVName'></td></tr><tr class='phone'><td>联系电话：</td><td><input type='text' onblur='checkphone()' value='"+data.phone+"' name='phone' id='phone'/ ></td ><td id='DIVPhone'><span ></span></td></tr>");
	       if(data.status =="未认证"){
					
					$('#table1').append("<tr><td>状态：</td><td><select name='status' class='status'><option value='已认证'>已认证</option><option value='未认证' selected='selected'>未认证</option></select></td></tr>");
				}
				if(data.status=="已认证"){
					$('#table1').append("<tr><td>状态：</td><td><select name='status' class='status'><option value='已认证' selected='selected'>已认证</option><option value='未认证'>未认证</option></select></td></tr>");
				
				}$('#my2').modal();
			},
			error:function(){
				alert("加载失败！");
			}
		});

	}
	
	function ownerdetail(id) {
		$.ajax({
				type:"post",
				url:"/property/main/ownerdetail",
				data:{"id":id},
				dataType:"json",
				success:function(data){
					if(data!=null&&data!=""){
						$("#comName").text(data.community.communityName);
						$("#name").text(data.name);
						$("#tower").text(data.tower);
						$("#houseIN").text(data.houseIN);
					}
					
				},
				error:function(){
					alert("加载失败");
				}
		})

		$("#my3").modal();
	}
</script>
</head>
<body>
	<div
		style="width: 1050px; height: 620px; background-color: #FFF; margin: 20px;">
		<h4
			style="background-color: #9FB2C2; padding-left: 10px; color: #516D8A; line-height: 40px;">
			<img alt="" src="${initParam.url}/statics/images/title.jpg">房屋列表
		</h4>

		<div
			style="background-color: #9FB2C2; padding-left: 10px; color: #516D8A; line-height: 40px; width: 1000px; height: 60px; margin-left: 20px;">
			<form class="navbar-form navbar-left" role="search">
				<button type="button" class="btn btn-default btn-lg"
					onclick="pop()">
					<span class="glyphicon glyphicon-log-in"></span>导入excel
				</button>

				<c:if test='${key!=null and key!="" }'>
					<button type="button"
						onclick="window.location.href='${initParam.url}/dow?key='+${key}"
						class="btn btn-default btn-lg">
						<span class="glyphicon glyphicon-log-out"></span>导出excel
					</button>
				</c:if>
				<c:if test='${key==null or key=="" }'>
					<button type="button"
						onclick="window.location.href='${initParam.url}/dow'"
						class="btn btn-default btn-lg">
						<span class="glyphicon glyphicon-log-out"></span>导出excel

					</button>
				</c:if>

				<div class="form-group" id="search">
					<label>关键字：</label><input type="text" class="form-control" id="key"
						placeholder="" name="key">
				</div>
				<button type="button" class="btn btn-default" 
					onclick="window.location.href='houselist?key='+document.getElementById('key').value">
					<span class="glyphicon glyphicon-search"></span>
				</button>
			</form>

		</div>
	
		<table class="table table-hover" id="xinxi">
			<tr>
				<th>业主真实姓名</th>
				<th>所在楼栋</th>
				<th>所在房屋</th>
				<th>联系电话</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<c:forEach var="hl" items="${houselist }">
				<tr>

					<td>${hl.name }</td>
					<td>${hl.tower }</td>
					<td>${hl.houseIN }</td>
					<td>${hl.phone }</td>
					<td>${hl.status}</td>
					<td><a href="javascript:void(0);" onclick="ownerdetail('${hl.id}')">查看详情</a>&nbsp;|&nbsp;<a
					href="javascript:void(0);"	onclick="as('${hl.id}')">修改&nbsp;</a>|&nbsp;<a href="deteleOwner?id=${hl.id}">删除</a></td>

				</tr>
			</c:forEach>
		</table>
		
		<div class="page">
    				<c:if test="${totalPages>0}">
						<c:if test="${page>1}">
							<a href="?page=${page-1}">上一页</a>
						</c:if>
						<c:if test="${page<=1}">
							<a>上一页</a>
						</c:if>
						<c:if test="${page<totalPages}">
							<a href="?page=${page+1}">下一页</a>
						</c:if>
						<c:if test="${page>=totalPages}">
							<a>下一页</a>
						</c:if>
	                    	<a href="#">第 ${page} 页，共 ${totalPages} 页</a>
	               </c:if>	
	               </div>
		<div class="modal fade" id="my1" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel"
			style="width:350px; height:250px; background-color: #FFF; margin: auto; padding-top: 0px;">
			<div class="modal-header" id="log">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">导入Excel</h4>
				<form action="${initParam.url}/form" method="post"
					enctype="multipart/form-data">
					<h3>选择文件：</h3>
					<input name="file" type="file"> <input type="submit"
						value="提交">
				</form>
			</div>
		</div>
		<div class="modal fade" id="my2" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel"
			style="width:550px; height: 320px; background-color: #FFF; margin: auto; padding-top: 0px;">
			<div class="modal-header" id="log">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<h3>编辑信息：</h3>
					</div>
				<form action="updateOwner" method="post" enctype="multipart/form-data"  id="sub">
				<table id="table1">
					
				</table>
				<div id="but" >
				<input name="sub" type="button" id="btn" value="确定修改" class="btn btn-primary btn-lg"> 
						</div>
				</form>
			
				</div>
		</div>
		<div class="modal fade" id="my3" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel"
			style="width:400px; height: 300px; background-color: #FFF; margin: auto; padding-top: 0px;">
			<div class="modal-header" id="log">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<h4>业主详情信息：</h4>
				</div>
				<div id="de">
							<h2 >小区名：<label  id="comName" >asdvsd</label></h2>
		   					<p >业主姓名：<label id="name">asdsac</label></p>
							<p >业主地址：<label id="houseIN">scsa</label>&nbsp;&nbsp;<label id="tower"></label></p>
				</div>
		</div>
</body>
</html>